<template>
  <div class="login">
    <el-card class="card">
      <template v-slot:header>
        <span>
          欢迎登录
        </span>
      </template>
      <el-form :model="admin" ref="loginForm" :rules="rules">
        <el-form-item prop="email">
          <el-input v-model="admin.email" placeholder="请输入邮箱">
            <template v-slot:prepend>
              <i class="el-icon-s-custom"></i>
            </template>
          </el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input type="password" v-model="admin.password" placeholder="请输入密码">
            <template v-slot:prepend>
              <i class="el-icon-lock"></i>
            </template>
          </el-input>
        </el-form-item>
        <el-form-item>
          <el-button @loading="loading" size="small" type="primary" @click="submitForm('loginForm')" style="width: 100%;">登录</el-button>
        </el-form-item>
      </el-form>
    </el-card>
    <copyright class="bottom-layer" />
  </div>
</template>

<script>
import { setToken, getToken, setEmail } from '../libs/tools'
import { login } from '../api/v1/auth'
export default {
  name: 'Login',
  data() {
    return {
      admin: {
        phoneNumber: 0,
        email: '',
        password: ''
      },
      loading: false,
      rules: {
        email: [
          {
            required: true,
            message: '邮箱不能为空',
            trigger: 'blur'
          },
          {
            type: 'email',
            message: '邮箱格式不对',
            trigger: ['blur', 'change']
          }
        ],
        password: [
          {
            required: true,
            message: '密码不能为空',
            trigger: 'blur'
          }
        ]
      }
    }
  },
  methods: {
    submitForm(formName) {
      this.loading = true
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.login()
        } else {
          this.loading = false
          return false;
        }
      });
    },
    login() {
      const { email, password, phoneNumber } = this.admin
      login(email, password, phoneNumber).then(res => {
        this.loading = false
        if(res.status === 200 && res.data && res.data.token) {
          setToken(res.data.token)
          setEmail(email)
          this.$router.push('home')
        }
      }).catch(e => {
        this.$message.error('账号或密码错误！')
        this.loading = false
        console.log(e)
      })
      
    }
  }
}
</script>

<style scoped>
.login {
  position: relative;
  width: 100%;
  height: 100%;
  background: url('../assets/image/login-bg-big.jpeg') no-repeat center center;
  background-size: cover;
}

.card {
  position: absolute;
  width: 350px;
  left: 50%;
  top: 20%;
  transform: translateX(-50%);
}

.bottom-layer {
  position: absolute;
  margin-bottom: 0;
  width: 100%;
  height: 40px;
  bottom: 0;
  left: 0;
  right: 0;
  color: #aaa;
  background-color: rgba(0, 0, 0, .4);
  text-align: center;
  line-height: 20px;
  font-size: 12px;
}
</style>